<template>
  <div class="wrapper advert clearfix" v-if="show">
    <div class="ann-ico">
      <img class="ico-img" :src="cdata[0].tag[0].picUrl | imgUrl">
    </div>
    <div class="ann-list">
      <ul>
        <li v-for="item in homeNotice">
          <div class="port"><i></i></div>
          <a :href="item.linkUrl">{{item.elementName}}</a>
          <span>{{item.elementDesc}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import fetch from '@/config/fetch'
import { mapGetters } from 'vuex'
import {
  cmslib
} from '@/config/env'

export default {
  data () {
    return {
      homeNotice:[],
      show: true
    }
  },
  props: ['cdata'],
  computed: {
    ...mapGetters([
      'indexNotice'
    ])
  },
  created() {
    if (!this.cdata[0].tag) {
      this.show = false
      return
    }
    this.getNotice();
  },
  methods: {
    getNotice() {
      let url = cmslib + '/api/jsonp/cb/' + this.indexNotice + '-getbulletinurljsonp.jsonp'
      console.log(url)
      fetch({
        url: url,
        params: {},
        jsonp: 'callback',
        jsonpCallback: 'getbulletinurljsonp'
      }).then(res => {
        if (res.xd_noticebody) {
          this.homeNotice = res.xd_noticebody.tag
          this.$nextTick(() => {
            this.move()
          })
        }else {
          this.show = false
        }
      })
    },
    move() {
      console.log("jahajajaj")
      var obj = document.querySelector('.advert ul'),
        items = document.querySelectorAll('.advert ul li'),
        len = items.length,
        all = Math.ceil(items.length / 2),
        cur = 1;
      if (len <= 2) {
        return;
      }
      if (len % 2 == 1) {
        obj.appendChild(items[0].cloneNode(true));
      } else {
        obj.appendChild(items[0].cloneNode(true));
        obj.appendChild(items[1].cloneNode(true));
      }

      setInterval(function () {
        if (cur == all + 1) {
          obj.classList.remove('animate');
          obj.style.top = 0;
          cur = 1;
        }
        setTimeout(function () {
          cur++;
          obj.classList.add('animate');
          obj.style.top = -1.6 * (cur - 1) + 'rem';
        }, 10);
      }, 5000);
    }
  },
  updated() {
  }
}
</script>

<style lang="scss" scoped>
@function to_rem($px) {
  $rem: $px/50px;
  @return #{$rem}rem;
}

.advert {
  width: to_rem(750px);
  height: to_rem(136px);
  margin-top: to_rem(16px);

  color: #444444;
  overflow: hidden;
  .ann-ico {
    width: to_rem(114px);
    height: to_rem(136px);
    float: left;
    text-align: right;
    line-height: to_rem(136px);
    .ico-img {
      width: to_rem(86px)
    }
  }
  .ann-list {
    width: to_rem(636px);
    height: to_rem(80px);
    float: left;
    margin-top: to_rem(28px);
    overflow: hidden;
    position: relative;
  }
  ul {
    width: to_rem(636px);
    position: absolute;
    left: 0;
    top: 0;
    li {
      height: to_rem(40px);
      line-height: to_rem(40px);
      font-size: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .port {
        display: block;
        width: to_rem(40px);
        height: to_rem(40px);
        float: left;
        position: relative;
        i {
          position: absolute;
          display: block;
          left: 0;
          right: 0;
          margin: auto;
          top: 50%;
          width: to_rem(4px);
          height: to_rem(4px);
          background-color: #ccc;
          margin-top: to_rem(-2px);
        }
      }
      a {
        display: block;
        float: left;
        max-width: to_rem(510px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: to_rem(26px);
      }
      span {
        display: block;
        float: left;
        font-size: to_rem(26px);
        margin-left: to_rem(10px);
        color: #ccc;
      }
    }
    &.animate {
      -webkit-transition: all .5s;
      transition: all .5s;
    }
  }
}
</style>
